<template>
  <div class="knowledge-page">
    <!-- 左侧抽屉 -->
    <div class="drawer left-drawer" :style="{ width: leftDrawerWidth }">
      <div class="drawer-header">
        <h3>课程内容</h3>
      </div>
      <div class="drawer-content">
        <!-- 树结构 -->
        <el-tree
          ref="treeRef"
          :data="treeData"
          node-key="id"
          default-expand-all
          highlight-current
          :current-node-key="currentNodeKey"
          @node-click="get"
        />
      </div>
      <div class="toggle-button left" @click="toggleLeftDrawer">
        <arrow-right v-if="isLeftCollapsed" />
        <arrow-left v-else />
      </div>
    </div>

    <!-- 主内容区 (PDF) -->
    <div class="main-content">
      <div class="pdf-container">
        <!-- 这里放置 PDF 内容 -->
        <p>PDF 内容区域</p>
      </div>
    </div>

    <!-- 右侧抽屉 -->
    <div class="drawer right-drawer" :style="{ width: rightDrawerWidth }">
      <div class="drawer-header">
        <h3>项目手册</h3>
      </div>
      <div class="drawer-content">
        <div class="sub-header">
          <span class="subtitle">实验环境</span>
          <el-button link type="primary" @click="toggleMirror">
            {{ mirrorMode ? "关闭环境" : "开启环境" }}
          </el-button>
        </div>
        <div class="image-container">
          <img src="" />
        </div>
      </div>
      <div class="toggle-button right" @click="toggleRightDrawer">
        <arrow-left v-if="isRightCollapsed" />
        <arrow-right v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, toRefs } from "vue";
import { ArrowRight, ArrowLeft } from "@element-plus/icons-vue";
const treeRef = ref();
const state = reactive({
  isLeftCollapsed: false,
  isRightCollapsed: false,
  mirrorMode: false,
  currentNodeKey: 2,
  treeData: [
    {
      id: 1,
      label: "第一章 JavaScript基础",
      children: [
        {
          id: 2,
          label: "1.1 变量与数据类型",
        },
        {
          id: 3,
          label: "1.2 函数",
        },
        {
          id: 4,
          label: "第二章 Vue框架",
          children: [
            {
              id: 5,
              label: "2.1 组件基础",
            },
            {
              id: 6,
              label: "2.2 状态管理",
            },
          ],
        },
      ],
    },
  ],
});
let {
  treeData,
  isLeftCollapsed,
  isRightCollapsed,
  mirrorMode,
  currentNodeKey,
} = toRefs(state);

// 计算属性：左侧抽屉宽度
const leftDrawerWidth = computed(() => {
  return state.isLeftCollapsed ? "5px" : "350px";
});
// 计算属性：右侧抽屉宽度
const rightDrawerWidth = computed(() => {
  if (state.isRightCollapsed) return "5px";
  return state.mirrorMode ? "900px" : "350px";
});
// 切换左侧抽屉
function toggleLeftDrawer() {
  state.isLeftCollapsed = !state.isLeftCollapsed;
}

// 切换右侧抽屉
function toggleRightDrawer() {
  state.isRightCollapsed = !state.isRightCollapsed;
}
function get(data) {
  console.log(data);
}
// 切换镜像模式
function toggleMirror() {
  state.mirrorMode = !state.mirrorMode;
}
</script>

<style lang="scss" scoped>
.knowledge-page {
  height: calc(100vh - 150px);
  display: flex;
  flex-direction: row;
  background-color: #f5f5f5;
  overflow: hidden;
  .drawer {
    height: 100%;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;

    &.left-drawer {
      border-right: 1px solid #ebeef5;
    }

    &.right-drawer {
      border-left: 1px solid #ebeef5;
    }

    .drawer-header {
      padding: 20px;
      border-bottom: 1px solid #ebeef5;
      transition: opacity 0.3s ease;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .drawer-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      transition: opacity 0.3s ease;
    }

    .toggle-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      border-radius: 0 5px 5px 0;

      &.left {
        right: -15px;
        border-radius: 0 5px 5px 0;
      }

      &.right {
        left: -15px;
        border-radius: 5px 0 0 5px;
      }
      svg {
        width: 12px;
        height: 12px;
      }
    }
  }

  // 当左侧抽屉收起时隐藏内容
  .left-drawer[style*="width: 5px"] {
    .drawer-header,
    .drawer-content {
      opacity: 0;
      visibility: hidden;
    }

    .toggle-button.left {
      border-radius: 0 5px 5px 0;
    }
  }

  // 当右侧抽屉收起时隐藏内容
  .right-drawer[style*="width: 5px"] {
    .drawer-header,
    .drawer-content {
      opacity: 0;
      visibility: hidden;
    }

    .toggle-button.right {
      border-radius: 5px 0 0 5px;
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .pdf-container {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
  }

  .sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .subtitle {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .image-container {
    height: 254px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
